<template>
  <div>
    <common-table
      :clientHeight="clientHeight"
      :columns="columns"
      :tableData="tableData"
      @touchScroll="touchSearch"
    ></common-table>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import {  getQueryString } from "util/index.js";
import CommonTable from "@/components/common-table/index.vue";

export default {
  name: "App",
  components: { CommonTable },
  data() {
    return {
      title: "首页",
      token: null,
      params: {
        page: 1,
        size: 15,
      },
      total: 0,
      columns: [
        {
          title: "序号",
          fixed: 'left', 
          type: "seq",
          width: 60,
          align: "center",
        },
        {
          title: "采购业务员",
          key: "purchaser",
          field: "purchaser",
          width: 100,
          align: "center",
        },
        {
          title: "需求清单号",
          key: "contractNo",
          field: "contractNo",
          width: 100,
          align: "center",
        },
        {
          title: "状态",
          key: "purchaseStatusLabel",
          field: "purchaseStatusLabel",
          width: 100,
          align: "center",
        },
        {
          title: "项目名称",
          key: "programName",
          field: "programName",
          width: 100,
          align: "center",
        },
        {
          title: "项目编号",
          key: "programNumber",
          field: "programNumber",
          width: 100,
          align: "center",
        },
        {
          title: "类别",
          key: "contractCategory",
          field: "contractCategory",
          width: 100,
          align: "center",
        },
        {
          title: "供应商名称",
          key: "supplier",
          field: "supplier",
          width: 100,
          align: "center",
        },
        {
          title: "采购公司",
          key: "purchaseCorp",
          field: "purchaseCorp",
          width: 100,
          align: "center",
        },
        {
          title: "付款条件",
          key: "paymentCondition",
          field: "paymentCondition",
          width: 100,
          align: "center",
        },
        {
          title: "合同总金额",
          key: "purchaseAmount",
          field: "purchaseAmount",
          width: 100,
          align: "center",
        },
      ],
      clientHeight: 0,
      tableData: [],
    };
  },
  mounted() {
    let _this = this;
    _this.clientHeight = document.documentElement.clientHeight;

    getQueryString("token") &&
      (_this.token = getQueryString("token")) &&
      _this.getList();

    document.title = getQueryString("title");

    console.log("token", _this.token);
  },
  methods: {
    getList() {
      console.log("initData........", this.token);
      let _this = this;
      // 自定义加载图标

      Toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
      });

      axios({
        method: "post",
        headers: {
          Authorization: "Bearer " + this.token,
        },
        params: _this.params,
        data: {
          isDataFilter: true,
        },
        url: "/scm/api/v1/scmPurchaseContractHead/list",
      })
        .then((response) => {
          if (response.data.code === 0) {
            if (_this.tableData.length == 0) {
              _this.tableData = response.data.data;
            } else {
              _this.tableData = [..._this.tableData, ...response.data.data];
            }

            _this.total = response.data.total;
          }
          Toast.clear();
        })
        .catch((response) => {
          Toast.clear();
          console.log("response", JSON.stringify(response));
          if (response.status == 401) {
            Toast({
              duration: 500,
              message: "用户认证失效~",
            });
            uni.postMessage({
              data: {
                action: "navigateTo",
                id: "1001",
              },
            });
          } else {
            Toast({
              duration: 500,
              message: "网络错误~",
            });
          }
        });
    },
    touchSearch() {
      console.log("touchSearch........");
      if (this.total > 0 && this.params.page < this.total / this.params.size) {
        console.log(this.params.page);
        this.params.page++;
        this.getList();
      } else {
        Toast({
          duration: 500,
          message: "没有更多数据了~",
        });
      }
    },
  },
};
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
